<template>
  <div class="home-main relative">
    <HeaderTop class="fixed top-0 z-99"></HeaderTop>
    <HeaderBanner></HeaderBanner>
    <!--  -->
    <div class="max-width mx-auto my-0 grid gap-5 sm:p-2 p-5 grid-cols-1 md:grid-cols-2">
      <div>
        <SwiperBanner></SwiperBanner>
      </div>
      <div class="grid xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-1 gap-5">
        <div
          class="w-full h-60 relative bg-slate-200 rounded-3xl overflow-hidden"
          v-for="(item, index) in 6"
          :key="index">
          <div class="w-full h-full absolute opacity-0 hover:opacity-100 top-0 left-0 transition-all 
          bg-black bg-opacity-60 p-5">
            <div class="text-white w-full h-10 mb-5 text-wrap break-words line-clamp-2">
              123123123123123123123123123123123123123123123123123123</div>
            <div class="mb-2 text-slate-200">up朱：镇长大人</div>
            <div class="text-slate-200">播放量：9999</div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="max-width mx-auto my-0 w-full h-50 grid grid-cols-4 gap-5 mb-10">
      <div v-for="(item, index) in 4" :key="item" class="group w-full h-full relative overflow-hidden rounded-xl">
        <img class="blank w-full h-full transition-all duration-500 group-hover:scale-125"
          src="https://cc-img.townimg.com/wb/large/2024/02/0076Aswbly1hdl92q2899j30m80dwgsz.jpg"></img>
        <div
          class="w-full h-full absolute opacity-0  top-0 left-0 transition-all bg-black bg-opacity-60 p-5 duration-500 group-hover:opacity-100">
          <div class="text-white w-full h-10 mb-5 text-wrap break-words line-clamp-2">
            123123123123123123123123123123123123123123123123123123</div>
          <div class="mb-2 text-slate-200">up朱：镇长大人</div>
          <div class="text-slate-200">播放量：9999</div>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="max-width mx-auto my-0 main flex gap-5">
      <div class="content-left flex-1">
        <div class="banner"></div>
        <!--  -->
        <div class="w-full">
          <!-- nav -->
          <div></div>
          <!-- list -->
          <div class="card-list grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4  2xl:grid-cols-5">
            <div class="card-item rounded-sm overflow-hidden shadow-md transition-all duration-500 hover:-translate-y-1"
              v-for="(item, index) in 8" :key="index">
              <!-- picture -->
              <div class="groud pirturn-box relative">
                <div class="pirture">
                  <img class="w-full h-70 object-cover block"
                    src="https://cc-img.townimg.com/uploads/2025/09/20250918105747413.webp" alt="">
                </div>
                <div class="text text-sm absolute bottom-0 text-white p-1 line-clamp-2 text-center">
                  cosplay 碧蓝行线 可畏@_蓝色帽帽 cosplay 碧蓝行线 可畏@_蓝色帽帽 cosplay 碧蓝行线 可畏@_蓝色帽帽
                </div>
              </div>
              <!-- content -->
              <div class="content bg-white p-2">
                <div class="content-top mb-2 flex justify-between">
                  <!-- content-top -->
                  <div class="text-sm">
                    <span class="w-5 h-5 bg-slate-500"></span>
                    舰长大人
                  </div>
                  <div class="text-sm">11小时前</div>
                </div>
                <div class="content-bottom flex justify-between">
                  <!-- content-bottom -->
                  <div class="px-1 text-white bg-slate-400 text-sm rounded">249</div>
                  <div class="px-1 text-white bg-slate-400 text-sm rounded">0</div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-list grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4  2xl:grid-cols-5">
            <div class="card-item rounded-sm overflow-hidden shadow-md transition-all duration-500 hover:-translate-y-1"
              v-for="(item, index) in 8" :key="index">
              <!-- picture -->
              <div class="groud pirturn-box relative">
                <div class="pirture">
                  <img class="w-full h-70 object-cover block"
                    src="https://cc-img.townimg.com/uploads/2025/09/20250918105747413.webp" alt="">
                </div>
                <div class="text text-sm absolute bottom-0 text-white p-1 line-clamp-2 text-center">
                  cosplay 碧蓝行线 可畏@_蓝色帽帽 cosplay 碧蓝行线 可畏@_蓝色帽帽 cosplay 碧蓝行线 可畏@_蓝色帽帽
                </div>
              </div>
              <!-- content -->
              <div class="content bg-white p-2">
                <div class="content-top mb-2 flex justify-between">
                  <!-- content-top -->
                  <div class="text-sm">
                    <span class="w-5 h-5 bg-slate-500"></span>
                    舰长大人
                  </div>
                  <div class="text-sm">11小时前</div>
                </div>
                <div class="content-bottom flex justify-between">
                  <!-- content-bottom -->
                  <div class="px-1 text-white bg-slate-400 text-sm rounded">249</div>
                  <div class="px-1 text-white bg-slate-400 text-sm rounded">0</div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-list grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4  2xl:grid-cols-5">
            <div class="card-item rounded-sm overflow-hidden shadow-md transition-all duration-500 hover:-translate-y-1"
              v-for="(item, index) in 8" :key="index">
              <!-- picture -->
              <div class="groud pirturn-box relative">
                <div class="pirture">
                  <img class="w-full h-70 object-cover block"
                    src="https://cc-img.townimg.com/uploads/2025/09/20250918105747413.webp" alt="">
                </div>
                <div class="text text-sm absolute bottom-0 text-white p-1 line-clamp-2 text-center">
                  cosplay 碧蓝行线 可畏@_蓝色帽帽 cosplay 碧蓝行线 可畏@_蓝色帽帽 cosplay 碧蓝行线 可畏@_蓝色帽帽
                </div>
              </div>
              <!-- content -->
              <div class="content bg-white p-2">
                <div class="content-top mb-2 flex justify-between">
                  <!-- content-top -->
                  <div class="text-sm">
                    <span class="w-5 h-5 bg-slate-500"></span>
                    舰长大人
                  </div>
                  <div class="text-sm">11小时前</div>
                </div>
                <div class="content-bottom flex justify-between">
                  <!-- content-bottom -->
                  <div class="px-1 text-white bg-slate-400 text-sm rounded">249</div>
                  <div class="px-1 text-white bg-slate-400 text-sm rounded">0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-right  w-80">
        <!-- nav -->
        <div class="nav w-full h-10 bg-slate-700 rounded-t-md text-white text-sm cursor-pointer flex">
          <div class="actived flex-1 flex justify-center items-center">最新发布</div>
          <div class="flex-1 flex justify-center items-center">最火文章</div>
          <div class="flex-1 flex justify-center items-center">最热评论</div>
        </div>
        <!--  -->
        <div class="w-full bg-white p-3">
          <!-- card -->
          <div class="flex flex-col gap-2 mb-5">
            <div class="card w-full flex gap-2" v-for="(item, index) in 4" :key="index">
              <div class="content-left w-100">
                <div class="picture">
                  <img class=""
                    src="https://image.baidu.com/search/down?thumburl=https://baidu.com&url=https://lz.sinaimg.cn//mw2000/0076Aswbly1hexp02fnhdj31jk0v91h7.jpg"
                    alt="">
                </div>
              </div>
              <div class="content-right">
                <div class="text-sm line-clamp-2 mb-2">要亲眼去看，才能感受到世界的美哦～原神 纳西妲 @雪晴Astra-</div>
                <div class="flex justify-between">
                  <div class="text-xs">60727</div>
                  <div class="text-xs">1230</div>
                </div>
              </div>
            </div>
          </div>
          <!-- list -->
          <div class="flex flex-col gap-3">
            <div class="card flex items-center gap-1" v-for="(item, index) in 10" :key="item">
              <div class="index text-xs bg-slate-600 rounded-md text-white px-2 text-center">{{ index + 1 }}</div>
              <div class="text line-clamp-1 text-xs">【全屏手机壁纸】初音未来送你小心心 打伞的高中生 妹子在泡澡</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import HeaderTop from '@/layout/header-top/index.vue'
import HeaderBanner from '@/layout/header-banner/index.vue'
import SwiperBanner from '@/components/swiper-banner/index.vue'
</script>

<style lang="less" scoped>
.max-width {
  max-width: 1536px;
}

.home-main {
  background: url(@/assets/images/gplaypattern.png);
}
</style>
